{%extend name="Public:layout"/%}

{%block name="title"%}
<h2 class="mb20">
   上传图片，获取链接
</h2>
{%/block%}

{%block name="contents"%}
    <table class="table table-listing table-hovered">

        <tr>
          <td class="span4"><span class="text-red">*</span>上传类型：</td>
          <td>
              <label for="radio4" onclick="ST.todo('changeType', 'imgs')">
                <input id="radio4" type="radio" name="type" value="imgs" opt="radio" checked />
                长图
              </label>
              <label for="radio3" onclick="ST.todo('changeType', 'img')">
                <input id="radio3" type="radio" name="type" value="img" opt="nrq"/>
                单图
              </label>
              <label for="radio2" onclick="ST.todo('changeType', 'sound')">
                <input id="radio2" type="radio" name="type" value="sound" opt="nrq"/>
                音频
              </label>
              <label for="radio1" onclick="ST.todo('changeType', 'video')">
                <!--同组radio需添加opt="nrq"、只需要在一个radio上添加opt="radio"-->
                <input id="radio1" type="radio" name="type" value="video" opt="nrq"/>
                视频
              </label>
              <div verify="1" class="inline">
                <div class="alert alert-info">
                  <i class="icon"></i>
                  <span>建议图片宽度不小于320,上传后默认放缩为450宽</span>
                </div>
              </div>
          </td>
        </tr>
        
        <tr>
          <td id="js_changeType" colspan="2">
              <div style="display: none" id="js_video">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upFiles')">上传视频</a><br />
              </div>
              <div style="display: none" id="js_sound">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upFiles')">上传音频</a><br />
              </div>
              <div style="display: none" id="js_img">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upImage')">上传单图</a><br />
              </div>
              <div style="" id="js_imgs">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upImage')">上传多图</a><br />
              </div>
              <p id="js_content"></p>
              <input type="hidden" name="content" value="" />
              <p id="show_links"></p>
          </td>
        </tr>
    </table>
{%/block%}

{%block name="js"%}
<script type="text/plain" id="js_editor_upload" style="display:none;"></script>
<script type="text/plain" id="js_editor_upload_spoiler" style="display:none;"></script>
<script type="text/plain" id="js_editor_upload_bg" style="display:none;"></script>
<script type="text/plain" id="js_editor_upload_sound_img" style="display:none;"></script>
<script src="__JAVASCRIPT__/ueditor/ueditor.config.js"></script>
<script src="__JAVASCRIPT__/ueditor/ueditor.all.min.js"></script>
<script src="__JAVASCRIPT__/Sortable.min.js"></script>
<script type="text/javascript">

    function image_sort() {
        if ($('input[name=type]:checked').val() == 'imgs') {
            var arr = $('#js_content').html().split(','), html = '';
            $.each(arr, function(k, v) {
                html += '<em style="width: 80px; height: 100px; display: inline-block;"><img width="60" height="80" src="' + v + '" /></em>';
            });
            $('#js_content').html(html);
            new Sortable(document.getElementById('js_content'), {
                onEnd:function() {
                    var value = '', dot = '';
                    $('#js_content').find('img').each(function() {
                        value += dot + $(this).attr('src');
                        dot = ',';
                    });
                    $('input[name=content]').val(value);
                    show_links();
                }
            });
        }
        show_links();
    }
    
    function show_links(){
    	var wrapcontent = '';
    	if ($('input[name=type]:checked').val() == 'imgs') {
		   	var arr = $('input[name=content]').val().split(',');
			$.each(arr, function(k, v) {
		       	var links = v;
		   		var links_arr = links.split(".");
		   		var wh = links_arr[1].split("x");
		   		var width = wh[0];
		   		var height = wh[1];
		   		var WIDTH_CONST = 450;
		   		var newheight = Math.round(450 * wh[1] / wh[0]);
		   		links = "http://image.manyule.com/caidan" + links + "." + WIDTH_CONST + "x" + newheight + ".jpg";
		   		wrapcontent += ('<em style="display:block;">' + links + '</em>');
			});
			$("#show_links").html(wrapcontent);
    	}else{
    		var links = $('input[name=content]').val();
    		if($.trim(links) == ""){
    			return;
    		}
    		links = "http://image.manyule.com/caidan" + links;
    		wrapcontent += ('<em style="display:block;">' + links + '</em>');
    		$('#js_content').html("");
    		$("#show_links").html(wrapcontent);
    	}
    }

    //视频 音频 图片 长图
    var js_editor_upload = UE.getEditor('js_editor_upload', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_caidan')%}"});
    js_editor_upload.ready(function () {
        js_editor_upload.hide();//隐藏编辑器
        js_editor_upload.addListener('beforeInsertImage', function (t, arg) {
            var value = '', dot = '';
            $.each(arg, function(k, v) {
                value += dot + v.src;
                dot = ',';
            })
            $('input[name=content]').val(value);
            $('#js_content').html(value);
            image_sort();
        });
        js_editor_upload.addListener('afterUpfile', function (t, arg) {
            var value = '', dot = '';
            $.each(arg, function(k, v) {
                value += dot + v.url;
                dot = ',';
            })
            $('input[name=content]').val(value);
            $('#js_content').html(value);
        });
    });

    //剧透图片
    var js_editor_upload_spoiler = UE.getEditor('js_editor_upload_spoiler', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_spoiler')%}"});
    js_editor_upload_spoiler.ready(function () {
        js_editor_upload_spoiler.hide();//隐藏编辑器
        js_editor_upload_spoiler.addListener('beforeInsertImage', function (t, arg) {
            $('input[name=spoiler_img]').val(arg[0].src);
        });
        js_editor_upload_spoiler.addListener('afterUpfile', function (t, arg) {
            $('input[name=spoiler_img]').val(arg[0].src);
        });
    });

    //视频背景，音频背景
    var js_editor_upload_bg = UE.getEditor('js_editor_upload_bg', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_caidan&a=1')%}"});
    js_editor_upload_bg.ready(function () {
        js_editor_upload_bg.hide();//隐藏编辑器
        js_editor_upload_bg.addListener('beforeInsertImage', function (t, arg) {
            if ($('#js_video').css('display') != 'none') {
                $('input[name=video_bg]').val(arg[0].src);
                $('#js_video_bg').html(arg[0].src);
            } else {
                $('input[name=sound_bg]').val(arg[0].src);
                $('#js_sound_bg').html(arg[0].src);
            }
        });
        js_editor_upload_bg.addListener('afterUpfile', function (t, arg) {
        });
    });

    //音频小图
    var js_editor_upload_sound_img = UE.getEditor('js_editor_upload_sound_img', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_sound_img')%}"});
    js_editor_upload_sound_img.ready(function () {
        js_editor_upload_sound_img.hide();//隐藏编辑器
        js_editor_upload_sound_img.addListener('beforeInsertImage', function (t, arg) {
            $('input[name=sound_img]').val(arg[0].src);
            $('#js_sound_img').html(arg[0].src);
        });
        js_editor_upload_sound_img.addListener('afterUpfile', function (t, arg) {
        });
    });

    $.extend(ST, {
        changeType:function (type) {
            $('#js_changeType div').hide();
            $('#js_' + type).show();
            $('input[name=content]').val("");
            $('#js_content').html("");
            $("#show_links").html("");
        },
        upImageEgg: function() {
            var myImage = js_editor_upload_spoiler.getDialog("insertimage");
            myImage.open();
        },
        upImage: function() {
            var myImage = js_editor_upload.getDialog("insertimage");
            myImage.open();
        },
        upFiles: function() {
            var myFiles = js_editor_upload.getDialog("attachment");
            myFiles.open();
        },
        upBg: function() {
            var myImage = js_editor_upload_bg.getDialog("insertimage");
            myImage.open();
        },
        upSoundImg: function() {
            var myImage = js_editor_upload_sound_img.getDialog("insertimage");
            myImage.open();
        }
    });
    ST.init();
</script>
{%/block%}
